import FavoFlex from "./FavoFlex";
import { settings, flexAligns } from "../settings";
import { vendorEditFavo } from "../Vendor";
import { filteredBox } from "../signals";

const FavoFlexBox = () => (
  <div
    class="m-auto mt-5 flex min-h-[50dvh] flex-row flex-wrap content-start text-center"
    style={{
      justifyContent: Object.keys(flexAligns)[settings.value.favo.flexAlign],
      width: `calc(var(--screen-w) * ${settings.value.favo.flexWidth / 100})`,
    }}
    onContextMenu={vendorEditFavo}
  >
    {filteredBox.value.map((box, index) => (
      <FavoFlex box={box} key={index} />
    ))}
  </div>
);

export default FavoFlexBox;
